<template>
  <div class="page">
    <img class="logo" :src="logoUrl" alt="风行TV" @error="hide($event)" />

    <div class="band band-blue"></div>
    <div class="band band-peach"></div>
    <div class="side-vertical">Experts who know your news better</div>

    <div class="main">
      <div class="illustration-wrap">
        <img class="illustration" :src="illuUrl" alt="illustration" @error="hide($event)" />
      </div>

      <div class="login-wrap">
        <div class="card">
          <div class="title-wrap">
            <h1 class="title">登录到</h1>
            <h2 class="subtitle">@@@ Television</h2>
          </div>

          <form class="form" @submit.prevent="onSubmit">


            <div class="input-group">
              <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="3"/><path d="M4 20a8 8 0 0 1 16 0"/></svg>
              </span>
              <input v-model="username" type="text" placeholder="请输入账号" required />
            </div>

            <div class="input-group">
              <span class="icon">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
              </span>
              <input ref="pwdRef" v-model="password" :type="showPwd ? 'text' : 'password'" placeholder="请输入密码" required autocomplete="new-password" />
              <span class="icon-right" @click="togglePwd" aria-label="显示/隐藏密码" title="显示/隐藏密码" v-html="showPwd ? eye : eyeOff"></span>
            </div>

            <label class="remember">
              <input type="checkbox" v-model="remember"> 记住账号
            </label>
          </form>

          <div class="btn-wrap">
            <button class="btn" type="button" :disabled="loading" @click="onSubmit">{{ loading ? '登录中...' : '登录' }}</button>
          </div>
        </div>
      </div>
    </div>

    <div class="footer">Copyright © 2021–2025 YKB. All Rights Reserved</div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/store/auth'
import logoImg from '../assets/logo.png'
import illuImg from '../assets/illustration.png'
const logoUrl = logoImg
const illuUrl = illuImg

const router = useRouter()
const username = ref('')
const password = ref('')
const remember = ref(false)
const loading = ref(false)
const error = ref(false)
const errorText = ref('')
const showPwd = ref(false)
const pwdRef = ref(null)
const authStore = useAuthStore()

const eye = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>'
const eyeOff = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-7 0-11-8-11-8a20.7 20.7 0 0 1 5.06-5.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a20.7 20.7 0 0 1-4.06 5.06"/><line x1="1" y1="1" x2="23" y2="23"/></svg>'

function hide(e){ e.target.style.opacity = 0 }

function togglePwd(){ showPwd.value = !showPwd.value; if (pwdRef.value) pwdRef.value.focus() }

async function onSubmit(){
  loading.value = true
  error.value = false
  try{
    const result = await authStore.login(username.value, password.value)
    if (result && result.success) {
      if (remember.value) {
        // 可选：在本地记住用户名
        localStorage.setItem('remember_username', username.value)
      }
      ElMessage.success('登录成功')
      router.push('/')
      return
    }
    ElMessage.error('账户或密码不正确')
  }catch(e){
    ElMessage.error('账户或密码不正确')
  }finally{
    loading.value = false
  }
}
</script>

<style scoped>
.page{
  width:100%;
  height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background:#fff;
  position:relative;
  overflow:hidden;
}

/* 顶部左侧 Logo */

.logo{
  position:absolute;
  top:32px;
  left:27px;
  height:57px;
}

/* 背景色带 */
.band{
  position:absolute;
  left:0; right:0;
  height:75px;
  pointer-events:none;
}
.band-blue{ top:589px; background:#eaf3ff; }
.band-peach{ top:759px; background:#ffe9e4; }

/* 右侧竖排标语 */
.side-vertical{
  position:absolute;
  right:37px;
  top:72px;
  transform:none;
  writing-mode:vertical-rl;
  color:#9aa5b1;
  font-size:27.8px;
  letter-spacing:.55px;
  user-select:none;
  white-space:nowrap;
  width:auto;
  max-width:none;
}

/* 中部主区域 */
.main{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:20px 24px 0;
  box-sizing:border-box;
  position:relative;
}

/* 左侧插画 */
.illustration-wrap{
  position:absolute;
  left:265px;
  top:179px;
  width:645px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.illustration{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* 右侧登录卡片 */
.login-wrap{
  position:absolute;
  left:1123px;
  top:173px;
  width:489px;
  height:597px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform: scale(0.95);
  transform-origin: top left;
}
.card{
  width:100%;
  height:100%;
  border-radius:12px;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
  background:#fff;
  padding:28px 28px 26px;
  box-sizing:border-box;
  position:relative;
}
.title{
  margin:0;
  font-size:35px;
  color:#000000;
  font-weight:400;
  text-align:left;
}
.subtitle{
  margin:11px 0 24px 0;
  font-size:35px;
  color:#000000;
  font-weight:700;
  line-height:1.2;
  text-align:left;
}

/* 表单 */
.form{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top:245px;
  display:flex;
  flex-direction:column;
  gap:17px;
}
.input-group{
  display:flex; align-items:center;
  border:1px solid #e5e7eb;
  border-radius:8px;
  padding:10px 12px;
  width:345px;
  height:56.4px;
  background:#fff;
}
.input-group input{
  flex:1; border:none; outline:none;
  font-size:14px;
}
.icon{ width:22px; height:22px; color:#8a8a8a; display:flex; align-items:center; margin-right:8px; }
.icon-right{ width:20px; height:20px; color:#8a8a8a; display:flex; align-items:center; cursor:pointer; margin-left:8px; }

.remember{
  display:flex; align-items:center;
  font-size:14px; color:#666;
  margin-top:-5px;
}
.remember input{ margin-right:7px; }

.btn{
  width:345px; height:47px;
  border:none; border-radius:12px;
  background:#3b82f6; color:#fff;
  font-size:16px; cursor:pointer;
}
.btn-wrap{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  /* 计算：表单 top(193) + 两个输入(56.4px*2) + 间距(17*2) + 记住账号上边距(7) + 额外间距(22) */
  top:calc(193px + 56.4px*2 + 17px*2 + 7px + 22px + 77px);
}
.btn:disabled{ opacity:.7; cursor:not-allowed; }
.btn:hover{ background:#2563eb; }

.footer{
  position:absolute;
  bottom:16px; left:50%;
  transform:translateX(-50%);
  color:#8a8a8a; font-size:12px;
  user-select:none;
}

.error-tip{display:block;margin:-6px 0 16px 2px;font-size:12px;color:#ff4d4f}
.page{
  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
.title-wrap{
  width:345px;
  margin-left:50%;
  transform: translateX(-50%);
  margin-top:72px;
}
/* 隐藏浏览器默认的密码显示/清除图标，避免与自定义图标重复 */
:deep(input[type="password"]::-ms-reveal),
:deep(input[type="password"]::-ms-clear){
  display:none;
}
:deep(input[type="password"]::-webkit-textfield-decoration-container),
:deep(input[type="password"]::-webkit-credentials-auto-fill-button){
  display:none;
}

</style>